<template>
	<view class="assis-det">
		<u-navbar :autoBack="false" leftIcon=" " :leftIconColor="titleColor" :bgColor="'transparent'"></u-navbar>
		<u-swiper :list="list3" circular></u-swiper>
		<view class="assist-mes">
			<view class="scan-area">
				<view class="scan-tit u-flex-col" @click="scanQRCode">
					<view>
						扫码开台
					</view>
					<view class="u-flex">
						<text>请扫描桌上的二维码</text>
						<u-icon name="arrow-right" color="#ffffff" size="12"></u-icon>
					</view>
				</view>
			</view>
			<view class="door-tickt u-flex">
				<view class="door-area u-flex-col" @click="selDoor">
					<view>
						附近门店
					</view>
					<view class="u-flex">
						<image src="../../static/adres-icon.png" mode=""></image>
						<text>{{nearRoom.distance}}km</text>
					</view>
					<view>
						{{nearRoom.name}}
					</view>
					<view>
						查看门店
					</view>
				</view>
				<view class="tickt-area u-flex-col">
					<view class="tghx-area u-flex-col" @click="toScanDone">
						<view>
							团购核销
						</view>
						<view>
							抖音/美团/大众点评
						</view>
					</view>
					<view class="mdyh-area u-flex-col" @click="selDoorTicket">
						<view>
							门店优惠
						</view>
						<view>
							看看附近门店优惠
						</view>
					</view>
				</view>
			</view>
			<view class="teach-area">
				<view class="teach-tit u-flex">
					<text>附近助教</text>
					<view class="u-flex" @click="moreTeach">
						<text>更多</text>
						<u-icon name="arrow-right" color="#777777" size="12"></u-icon>
					</view>
				</view>
				<view class="order-list">
					<template v-if="latestTeachs.length>0">
						<view class="order-item order-item-teach u-flex" v-for="item in latestTeachs" @click="toDetail">
							<image src="../../static/bill.png" mode=""></image>
							<view class="right-item">
								<view class="teach-name u-flex">
									<view class="order-name u-flex">
										<text>九亿少女的梦</text>
										<image src="../../static/boy.png" mode=""></image>
										<image class="labels" src="../../static/amateur.png" mode=""></image>
									</view>
									<text>5.3km </text>
								</view>
								<view class="order-mes">
									<view class="order-mes-left">
										<view class="labels-btn-area u-flex">
											<view class="labels-btn-list u-flex">
												<view>
													中式台球
												</view>
												<view>
													全时段可约
												</view>
											</view>
											<view class="labels-btn u-flex">
												<image src="../../static/yue-btn-icon.png" mode=""></image>
												<view>
													约Ta
												</view>
											</view>
										</view>
										<view class="price-btm">
											<view class="price-btm-right">
												<text>15.6</text>元/小时
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>
					<view v-else class="no_data">
						<image src="../../static/no_data.png" mode=""></image>
						<view>暂无数据</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		storeListApi
	} from "@/api/mtstore";
	import store from '@/store/index.js'
	import {
		getAddress
	} from '@/utils/location/getAddress.js'
	export default {
		data() {
			return {
				title: '门店列表',
				titleColor: '#333333',
				statusHgt: 0,
				list3: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				doorList: [],
				nearRoom: {
					distance: '',
					name: ''
				},
				latestTeachs: []
			}
		},
		mounted() {
			this.getStoreList()
		},
		onLoad(option) {
			this.statusHgt = getApp().globalData.statusBarHeight;
			this.latestTeachs = [];
		},
		methods: {
			getStoreList() {
				let that = this;
				uni.getLocation({
					type: "gcj02",
					success(res) {
						let longitude = res.longitude
						let latitude = res.latitude
						console.log("success_longitude:" + longitude)
						console.log("success_latitude:" + latitude)
						store.commit('setLocation', {
							longitude: res.longitude,
							latitude: res.latitude,
						})

						getAddress(longitude, latitude)
							.then((res) => {
								//console.log("getAddress_res:"+res.result)
								console.log("getAddress_city:" + res.result.address_component.city)
								let cityName = res.result.address_component.city;
								let countyCode = res.result.ad_info.adcode;
								console.log("countyCode=", countyCode)
								let cityCode = "";
								let provinceCode = "";
								if (countyCode) {
									provinceCode = countyCode.substring(0, 2) + "0000";
									cityCode = countyCode.substring(0, 4) + "00";
								}
								console.log("cityCode=", cityCode)
								// 获取城市信息
								that.selectCity = {
									city: cityName,
									cityCode: cityCode,
									lat: latitude,
									lng: longitude
								}
								store.commit('setSelectCity', that.selectCity)
								// 保存定位城市信息
								let params = {
									city: cityName,
									name: cityName,
									lng: longitude,
									lat: latitude,
									cityCode: cityCode
								}
								store.commit('setLocation', params)
								let data = {
									latitude: latitude, //纬度
									longitude: longitude, //经度
									cityCode: cityCode
								};
								storeListApi(data).then(res => {
									that.doorList = res.data;
									that.nearRoom = res.data[0]
								})
								//store.commit('setLocation', params)
							})
							.catch((e) => {

								console.log(e, '解释地址失败')
							})
					},
					fail(err) {

						console.log(err, '获取经纬度失败')
						uni.showToast({
							title: "位置获取失败，请检查是否开启获取位置权限",
							icon: 'none',
							duration: 3000
						})
					}
				})



			},

			//获取门店
			// getSelCityStoreList(){
			// 	let selCity = this.$store.getters.getSelectCity
			// 	console.log("selCity:"+JSON.stringify(selCity))
			// 	let data = {
			// 		latitude: selCity.lat, //纬度
			// 		longitude: selCity.lng, //经度
			// 		cityCode: selCity.cityCode
			// 	};
			// 	storeListApi(data).then(res => {
			// 		this.doorList = res.data
			// 	})
			// },


			//门店核销
			toScanDone() {
				uni.navigateTo({
					// url:"/page_business/scanDone/scanDone"
					url: '/pages/subPack/discounts/details?nav=2'
				})
			},
			//附近门店
			selDoor() {
				uni.switchTab({
					url: "/pages/door/door"
				})
			},
			//门店优惠
			selDoorTicket(val) {
				uni.navigateTo({
					// url:"/page_business/doorTicket/doorTicket"
					url: '/pages/subPack/discounts/details?nav=0'
				})
			},
			//附近助教
			moreTeach() {
				uni.navigateTo({
					url: "/page_business/assistant/assistant"
				})
			},

			//扫码
			scanQRCode() {
				uni.scanCode({
					success(res) {
						if (res.result) {
							// 扫描成功，处理二维码内容
							console.log('扫描结果：', res.result);
							//todo 这里可以进行后续操作，如跳转页面、显示信息等
						} else {
							// 扫描失败
							uni.showToast({
								title: '扫描失败',
								icon: 'none'
							});
						}
					},
					fail() {
						// 调用相机失败
						uni.showToast({
							title: '调用相机失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	/deep/.u-swiper {
		height: 300rpx !important;
	}

	/deep/.u-swiper__wrapper {
		height: 300rpx !important;
	}

	/deep/.u-swiper__wrapper__item__wrapper__image {
		height: 300rpx !important;
	}

	.assist-mes {
		margin-top: -40rpx;
		padding: 26rpx 28rpx 0;
		position: relative;
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0px 0px;

		.scan-area {
			width: 688rpx;
			height: 219rpx;
			background: url(https://qn.zqbond.com/wxmp/index-scan.png) no-repeat;
			background-size: 100% 100%;

			.scan-tit {
				height: 219rpx;
				justify-content: center;
				padding-left: 30rpx;

				>view {
					&:nth-child(1) {
						margin-top: 10rpx;
						font-size: 40rpx;
						font-weight: bold;
						color: #E86401;
					}

					&:nth-child(2) {
						padding: 0 20rpx;
						box-sizing: border-box;
						justify-content: space-between;
						width: 325rpx;
						height: 48rpx;
						background: #FF740C;
						box-shadow: 0px -2rpx 0px 0px rgba(188, 86, 10, 0.35);
						border-radius: 24rpx;
						font-size: 26rpx;
						color: #ffffff;
						margin-top: 18rpx;
					}
				}
			}

		}

		.door-tickt {
			margin-top: 30rpx;
			justify-content: space-between;

			.door-area {
				width: 332rpx;
				height: 364rpx;
				background: url(https://qn.zqbond.com/wxmp/index-door.png) no-repeat;
				background-size: 100% 100%;
				padding-left: 40rpx;
				box-sizing: border-box;

				>view {
					&:nth-child(1) {
						margin-top: 50rpx;
						font-size: 34rpx;
						font-weight: 550;
						color: #333333;
					}

					&:nth-child(2) {
						margin-top: 26rpx;
						font-size: 24rpx;
						color: #666666;

						image {
							width: 15rpx;
							height: 18rpx;
							margin-right: 6rpx;
						}
					}

					&:nth-child(3) {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #666666;
					}

					&:nth-child(4) {
						width: 128rpx;
						height: 48rpx;
						border: 1rpx solid #4C8CD7;
						border-radius: 8rpx;
						margin-top: 40rpx;
						font-size: 24rpx;
						color: #4C8CD7;
						text-align: center;
						line-height: 48rpx;
					}
				}
			}

			.tickt-area {
				height: 364rpx;
				justify-content: space-between;

				>view {
					width: 330rpx;
					height: 170rpx;
					justify-content: center;
					padding-left: 30rpx;
					box-sizing: border-box;

					>view {
						&:nth-child(1) {
							font-size: 30rpx;
							font-weight: 550;
							color: #333333;
							margin-bottom: 8rpx;
						}

						&:nth-child(2) {
							font-size: 24rpx;
							color: #666666;
						}
					}
				}

				.tghx-area {
					background: url(https://qn.zqbond.com/wxmp/index-ticket.png) no-repeat;
					background-size: 100% 100%;
				}

				.mdyh-area {
					background: url(https://qn.zqbond.com/wxmp/index-mdyh.png) no-repeat;
					background-size: 100% 100%;
				}
			}
		}

		.teach-area {
			margin-top: 40rpx;

			.teach-tit {
				justify-content: space-between;

				>text {
					font-size: 38rpx;
					font-weight: 550;
					color: #333333;
				}

				>view {
					font-size: 26rpx;
					color: #777777;
				}
			}

			.order-list {
				padding: 20rpx 0;

				.order-item {
					width: 685rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					margin-bottom: 20rpx;
					padding: 20rpx 0;
					box-sizing: border-box;

					.order-name {
						padding-bottom: 20rpx;
						border-bottom: 1rpx solid #CCCCCC;
						justify-content: space-between;

						>text {
							&:nth-child(1) {
								font-size: 32rpx;
								font-weight: bold;
								color: #333333;
							}

							&:nth-child(2) {
								font-size: 26rpx;
								color: #FF7814;
							}
						}
					}

					.order-mes {
						padding-top: 20rpx;
						justify-content: space-between;

						.order-mes-left {
							.labels-btn-area {
								justify-content: space-between;
								align-items: self-start;

								.labels-btn-list {
									>view {
										padding: 0 10rpx;
										height: 38rpx;
										line-height: 38rpx;
										background: #F6F5F8;
										border-radius: 4rpx;
										font-size: 22rpx;
										font-weight: 500;
										color: #777777;
										margin-right: 10rpx;
									}
								}

								.labels-btn {
									width: 133rpx;
									height: 70rpx;
									background: #FF7814;
									border-radius: 8rpx;
									justify-content: center;

									image {
										width: 31rpx;
										height: 31rpx;
										margin-right: 10rpx;
									}

									>view {
										font-size: 30rpx;
										font-weight: bold;
										color: #FFFFFF;
									}
								}
							}
						}

						.order-mes-right {
							.over-btn {
								width: 152rpx;
								height: 70rpx;
								line-height: 70rpx;
								background: #FF752F;
								border-radius: 8rpx;
								font-size: 30rpx;
								color: #FFFFFF;
								text-align: center;
							}

							.cancel-btn {
								width: 152rpx;
								height: 70rpx;
								line-height: 72rpx;
								background: transparent;
								border: 1rpx solid #FF752F;
								border-radius: 8rpx;
								font-size: 30rpx;
								color: #FF752F;
								text-align: center;
							}

							.done-btn {
								image {
									width: 136rpx;
									height: 136rpx;
								}
							}
						}
					}
				}

				.order-item-reserv {
					.order-name {
						>text {
							&:nth-child(2) {
								font-size: 26rpx;
								color: #0EA632;
							}
						}
					}
				}

				.order-item-teach {
					>image {
						width: 123rpx;
						height: 123rpx;
						margin-right: 16rpx;
					}

					.right-item {
						flex: 1;

						.order-mes {
							padding-top: 10rpx;

							.price-btm {
								justify-content: space-between;
								margin-bottom: 0;

								.price-btm-right {
									font-size: 24rpx;
									color: #333333;

									>text {
										font-size: 36rpx;
										margin-right: 0rpx;
										color: #FF7814;
									}
								}
							}
						}

						.teach-name {
							justify-content: space-between;

							.order-name {
								padding: 0;
								border: none;
								justify-content: flex-start;

								text {
									font-size: 30rpx;
									color: #333333;
									margin-right: 14rpx;
								}

								image {
									width: 24rpx;
									height: 22rpx;
								}

								image.labels {
									width: 78rpx;
									height: 25rpx;
									margin-left: 14rpx;
								}
							}

							>text {
								font-size: 24rpx;
								color: #666666;
							}
						}
					}
				}
			}
		}
	}
	.no_data {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		image {
			width: 150rpx;
			height: 150rpx;
			display: block;
			margin: 0 auto;
		}

		>view {
			text-align: center;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #999999;
		}
	}
</style>
